<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <el-form :inline="true" :model="productsSearchForm" class="demo-form-inline">
            <el-form-item label="商品id">
                <el-input v-model="productsSearchForm.pid" placeholder="商品id"></el-input>
            </el-form-item>
            <el-form-item label="商品名">
                <el-input  placeholder="商品名" v-model="productsSearchForm.pname" style="width: 100%;"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="initTable">搜索</el-button>
            </el-form-item>
        </el-form>

        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="pid"
                    label="商品id"
                    >
            </el-table-column>
            <el-table-column
                    prop="pname"
                    label="商品名字"
                    >
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="商品价格">
            </el-table-column>
            <el-table-column
                    prop="flag"
                    label="商品状态">
            </el-table-column>
            <el-table-column
                    prop="category.cid"
                    label="类别id">
            </el-table-column>
            <el-table-column
                    prop="category.cname"
                    label="类别id">
            </el-table-column>
            <el-table-column
                fixed="right"
                lable="操作">
                <template slot-scope="scope">
                    <el-button type="success" size="small" icon="el-icon-edit" @click="editProducts(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small"  icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5,10,15,20]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <!--编辑的对话框-->
        <el-dialog
                title="修改员工"
                :visible.sync="dialogVisible"
                width="30%"
        >
            <el-form ref="form" :model="editProductsForm" label-width="80px" >
                <el-form-item label="商品名">
                    <el-input v-model="editProductsForm.pname"></el-input>
                </el-form-item>
                <el-form-item label="商品价格">
                    <el-input v-model="editProductsForm.price"></el-input>
                </el-form-item>
                <el-form-item label="商品状态">
                    <el-input v-model="editProductsForm.flag"></el-input>
                </el-form-item>
                <el-form-item label="商品类型id">
                    <el-input v-model="editProductsForm.categoryId"></el-input>
                </el-form-item>
                <el-form-item label="商品类型">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item size="large">
                    <el-button type="primary">确认修改</el-button>
                    <el-button @click="dialogVisible=false">取消</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>
    </div>
</body>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                tableData:[],
                productsSearchForm:{},
                productsVo:{},
                //编辑对话框的显示和隐藏
                dialogVisible:false,
                editProductsForm:{},
                currentPage:1,
                pageSize:5,
                total:0
            },
            created(){
                this.initTable();
            },
            methods:{
                initTable(){
                    axios.post("http://localhost:8080/products/list/"+this.currentPage+"/"+this.pageSize,this.productsSearchForm).
                        then(result =>{
                        this.tableData=result.data.data.records;
                        this.total=result.data.data.total;
                    })
                },
                handleSizeChange(val) {
                    this.pageSize=val;
                    this.initTable();
                },
                handleCurrentChange(val) {
                    this.currentPage=val;
                    this.initTable();
                },
                del(row){
                    let pid=row.pid;
                    axios.delete("http://localhost:8080/products/deleteById/"+pid).then(result=>{
                        if(result.data.code===200){
                            this.$message.success("删除成功") //弹出成功的消息框
                            this.initTable(); //重新加载表格
                        }
                    })
                },

                //编辑员工
                editProducts(row){
                    this.dialogVisible=true;
                    this.editProductsForm=row;

                }
            }

        })
    </script>
</html>